<template>
  <button 
    :class="[className]" 
    @click="showPicker"
    :disabled="disabled"
  >
    {{ displayText || placeholder }}
  </button>
</template>

<script>
  export default {
    name: 'AreaSelector',
    props: {
      // 省份值
      province: {
        type: String,
        default: ''
      },
      // 城市值
      city: {
        type: String,
        default: ''
      },
      // 区县值
      district: {
        type: String,
        default: ''
      },
      // 占位文本
      placeholder: {
        type: String,
        default: '点击选择省市区'
      },
      // 自定义样式类
      className: {
        type: String,
        default: 'area-selector'
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 省市区数据 - 实际项目中应该从接口获取
        areas: {
          "北京市": {
            "北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区", "石景山区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
          },
          "上海市": {
            "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "浦东新区", "闵行区", "宝山区", "嘉定区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
          },
          "广东省": {
            "广州市": ["越秀区", "海珠区", "荔湾区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "从化区", "增城区"],
            "深圳市": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区", "光明区", "大鹏新区"],
            "东莞市": ["莞城区", "东城区", "南城区", "万江区", "石龙镇", "石排镇", "茶山镇", "企石镇", "桥头镇", "东坑镇", "横沥镇", "常平镇", "虎门镇", "长安镇", "沙田镇", "厚街镇", "寮步镇", "大岭山镇", "大朗镇", "黄江镇", "樟木头镇", "凤岗镇", "塘厦镇", "谢岗镇", "清溪镇", "常平镇", "桥头镇", "麻涌镇", "中堂镇", "高埗镇", "石碣镇", "望牛墩镇", "洪梅镇", "道滘镇", "东坑镇", "企石镇", "茶山镇", "石排镇", "石龙镇", "松山湖高新区"]
          },
          "江苏省": {
            "南京市": ["玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区", "雨花台区", "江宁区", "六合区", "溧水区", "高淳区"],
            "苏州市": ["姑苏区", "虎丘区", "吴中区", "相城区", "吴江区", "苏州工业园区", "常熟市", "张家港市", "昆山市", "太仓市"]
          },
          "浙江省": {
            "杭州市": ["上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区", "萧山区", "余杭区", "富阳区", "临安区", "桐庐县", "淳安县", "建德市"],
            "宁波市": ["海曙区", "江北区", "北仑区", "镇海区", "鄞州区", "奉化区", "余姚市", "慈溪市", "象山县", "宁海县"]
          }
        }
      }
    },
    computed: {
      // 显示文本
      displayText() {
        const { province, city, district } = this;
        if (province && city && district) {
          return `${province}${city}${district}`;
        } else if (province && city) {
          return `${province}${city}`;
        } else if (province) {
          return province;
        }
        return '';
      }
    },
    methods: {
      // 显示省市区选择器
      showPicker() {
        if (this.disabled) return;
        
        // 提取所有省份
        const provinces = Object.keys(this.areas);
        
        // 第一步：选择省份
        this.showActionSheet('选择省份', provinces, (selectedProvince) => {
          // 第二步：选择城市
          const cities = Object.keys(this.areas[selectedProvince]);
          this.showActionSheet('选择城市', cities, (selectedCity) => {
            // 第三步：选择区县
            const districts = this.areas[selectedProvince][selectedCity];
            this.showActionSheet('选择区县', districts, (selectedDistrict) => {
              // 选择完成，触发事件传递结果
              this.$emit('change', {
                province: selectedProvince,
                city: selectedCity,
                district: selectedDistrict
              });
            });
          });
        });
      },
      
      // 封装ActionSheet显示方法
      showActionSheet(title, items, callback) {
        if (!items || items.length === 0) {
          console.error('没有可选的选项');
          return;
        }
        
        uni.showActionSheet({
          itemList: items,
          title: title,
          success: (res) => {
            if (res.tapIndex !== undefined) {
              const selectedItem = items[res.tapIndex];
              if (callback && typeof callback === 'function') {
                callback(selectedItem);
              }
            }
          },
          fail: (err) => {
            console.error(`${title}选择失败:`, err);
          }
        });
      },
      
      // 重置选择器
      reset() {
        this.$emit('change', {
          province: '',
          city: '',
          district: ''
        });
      }
    }
  }
</script>

<style scoped>
  .area-selector {
    width: 100%;
    height: 88rpx;
    background-color: #fff;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    font-size: 30rpx;
    color: #333;
    text-align: left;
    padding: 0 20rpx;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  .area-selector:active {
    background-color: #f5f5f5;
  }
  
  .area-selector[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
</style>